<template>
	<view class="coupon">
		<view class="tips">
			规则：一次只可生成一张优惠券的链接，分享链接给客户，让客户点击领取，领完链接则失效。
		</view>
		<view class="coupon-list">
			<view class="coupon-item" v-for="(data,index) in list" :key="index">
				<view class="coupon-item-left">
					<view class="coupon-price" v-if="data.type==1">￥<text>{{data.money}}</text></view>
					<view class="coupon-price" v-if="data.type==2"><text>{{data.discount}}</text>折</view>
					<view class="coupon-des" v-if="data.type==1">满{{data.satisfy_money}}可用</view>
				</view>
				<view class="coupon-item-center">
					<view class="coupon-name">{{data.coupon_name}}</view>
					<view class="coupon-time">有效期：{{data.stop_time}}</view>
				</view>
				<view class="coupon-item-right"><text @click="give(data)">赠送</text></view>
			</view>
		</view>
		<pt-loading v-if="loading"></pt-loading>
		<pt-nomore v-if="noMore && list.length"></pt-nomore>
		<pt-nothing
			:fixed="true"
			text="暂无可赠送优惠券" 
			v-if="noMore && !list.length">
		</pt-nothing>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loading: false,
				noMore: false,
				list: [],
				form: {
					style: 5,
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					use_type: 1,
					page: 0
				},
				number: 0
			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			uni.hideShareMenu()
			// #endif
		},
		onShow() {
			this.list = []
			this.noMore = false
			this.init()
		},
		onReachBottom() {
			if(!this.noMore){
				this.form.page++
				this.loading = true
				this.init()
			}
		},
		methods: {
			init(){
				this.$u.api.CardList(this.form).then(res => {
					this.loading = false
					if(res.datas.length){
						res.datas.forEach(item => {
							this.list.push(item)
						})
					}else{
						this.noMore = true
					}
				}).then(() => {
					// this.AddFoot('商家-优惠券-列表')
				})
			},
			addCoupon(){
				uni.navigateTo({
					url: '/pages/coupon/add-coupon',
					success: () => {
						// this.AddFoot('商家-优惠券-添加')
					}
				})
			},
			give(data){
				this.AddFoot('我的-赠送优惠券-可赠送优惠券列表-赠送')
				let info = {}
				if(data.type==2){
					info = {
						coupon_name: data.coupon_name,
						type: data.type,
						discount: data.discount,
						stop_time: data.stop_time
					}
				}else if(data.type==1){
					info = {
						coupon_name: data.coupon_name,
						type: data.type,
						satisfy_money: data.satisfy_money,
						money: data.money,
						stop_time: data.stop_time
					}
				}
				this.$u.api.CreatCoupon({coupon_id: data.coupon_id,store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id}).then(res => {
					// #ifdef H5
					uni.setClipboardData({
						data: 'https://master.jiaju01.com/web/shop/#/my/user-coupon/user-coupon-receive?key='+res.datas.number + '&info='+JSON.stringify(info),
						success: () => {
							uni.showToast({
								icon: 'none',
								title: '链接复制成功，赶紧发送给朋友领取优惠券吧~',
								duration: 2000
							})
						}
					})
					// #endif
					// #ifdef APP-PLUS
					uni.share({
						provider: 'weixin',
						scene: 'WXSceneSession',
						type: 0,
						href: 'https://master.jiaju01.com/web/shop/#/my/user-coupon/user-coupon-receive?key='+res.datas.number + '&info='+JSON.stringify(info),
						imageUrl: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/receive-2.jpg'
					})
					// #endif
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						animationDuration: 500,
						url: '/my/user-coupon/user-coupon-success?key='+res.datas.number + '&info='+JSON.stringify(info)
					})
					// #endif
				})
			},
			AddFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP
					type: 1,
					// #endif
					//#ifdef APP-PLUS
					type: 2,
					// #endif
					//#ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F8F8F8;
		padding-bottom: 120rpx;
	}
	.coupon{
		.tips{
			color: #999;
			font-size: 24rpx;
			line-height: 42rpx;
			padding: 30rpx 30rpx 0;
		}
	}
	.coupon-list{
		padding: 30rpx;
		.coupon-item{
			display: flex;
			background-color: #FFF;
			margin-bottom: 40rpx;
			border-radius: 8rpx;
			overflow: hidden;
			&:last-child{
				margin-bottom: 0;
			}
			.coupon-item-left{
				width: 180rpx;
				height: 150rpx;
				background-color: #F59359;
				color: #FFF;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				.coupon-price{
					margin-bottom: 10rpx;
					text{
						font-size: 42rpx;
					}
				}
				.coupon-des{
					font-size: 20rpx;
				}
				&::before{
					content: '';
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					background-color: #F8F8F8;
					border-radius: 50%;
					bottom: -10rpx;
					right: -10rpx;
					z-index: 1;
				}
				&::after{
					content: '';
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					background-color: #F8F8F8;
					border-radius: 50%;
					top: -10rpx;
					right: -10rpx;
					z-index: 1;
				}
			}
			.coupon-item-center{
				border-right: dashed 2rpx #E6E6E6;
				flex: 1;
				min-width: 0;
				padding: 0 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.coupon-name{
					font-size: 32rpx;
					margin-bottom: 20rpx;
				}
				.coupon-time{
					color: #999;
					font-size: 24rpx;
				}
			}
			.coupon-item-right text{
				padding: 0 20rpx;
				width: 60rpx;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #F59359;
				font-size: 24rpx;
				background-color: transparent;
				line-height: normal;
				height: 100%;
				&::after{
					display: none;
				}
			}
		}
	}
</style>
